<template>
 <div class="list" ref="wrapper" @touchmove.prevent='gobackTop' @mousewheel.prevent>
     <div>
        <div class="area">
        <div class="title">当前城市</div>
        <div class="btn-list">
          <div class="btn-wrapper">
            <div class="button">{{this.currentCity}}</div>
          </div>
        </div>
    </div>
    <div class="area">
        <div class="title">热门城市</div>
         <div class="btn-list">
          <div class="btn-wrapper" v-for='item of info' :key='item.id' @click="hand(item.name)">
            <div class="button">{{item.name}}</div>
          </div>
        </div>
    </div>
    <div class="area" v-for="(items,index) in allInfo" :key="index" :ref="index">
        <div class="title">{{index}}</div>
        <div class="item-list" v-for="item of items" :key='item.id'  @click="hand(item.name)">
            <div class="item">{{item.name}}</div>
        </div>
    </div>
 </div>
 </div>
</template>

<script>
import Bscroll from 'better-scroll'
import hub from '@/assets/js/hub.js'
import { mapState,mapMutations } from 'vuex'
// import '@/hub.js'
export default {
    name:'cityList',
    mounted(){
        this.scroll=new Bscroll(this.$refs.wrapper, { click: true});
    },
    created(){
        hub.$on('goTop',isGoTop=>{
            this.isGoTop=isGoTop
        })
    },
    props:{info:Array,allInfo:Object,letter:{
        type:String,
        default:'A'
    }},
    data(){
        return{
           isGoTop:false
        }
    },
    watch:{
        letter () {
            const element=this.$refs[this.letter][0]
            //this.$refs[this.letter]是数组 srollToElement里面只能是DOM元素 或者DOM选择器
            this.scroll.scrollToElement(element)
            //  console.log(this.$refs['A'][0].getBoundingClientRect().top);
            //  console.log(this.$refs.wrapper.offsetTop);
        },
        isGoTop() {
            let element=this.$refs.wrapper
            if(this.isGoTop){
                this.scroll.scrollToElement(element)
                this.$emit('goback',false)
                this.isGoTop=false
            }
        }
    },
    methods:{
        hand (city){
        //   this.$store.commit('chang',city)
        this.chang(city)
          this.$router.push('/')
        },
        gobackTop(){
            let start=this.$refs.wrapper.offsetTop
            let end=this.$refs['A'][0].getBoundingClientRect().top
            if(end<start){
                this.$emit('goback',true)
            }else{
                 this.$emit('goback',false)
            }
        },
        ...mapMutations(['chang'])
    },
    computed:{
        ...mapState({
            //不仅可以是数组，还可是对象 将仓库中数据映射为别的名字 再在这个组件上用
            currentCity:'city'
        })
    }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/varibles.styl' 
@import '~@/assets/css/ellipsis.styl'
.list
    background #f4f4f4
    color #2f2f2f
    overflow hidden
    position absolute
    top 1.7rem
    left 0
    right 0
    bottom 0
    .area
        height auto
        line-height .3rem
        // transition all 1s ease
        .title
            border .02rem solid #cccccc
            padding-top .1rem 
            padding-left .2rem
            padding-bottom .1rem
            border-left 0
            border-right 0
        .btn-list
            background-color #fff
            padding .1rem .6rem .1rem .2rem
            overflow hidden
            .btn-wrapper
                float left
                width 33.33%
                .button
                    height .5rem
                    border .02rem solid #e2e2e2
                    line-height .5rem
                    text-align center
                    margin .1rem
                    border-radius .1rem
                    color black 
                    font-weight bolder
                    ellipsis()
    .item-list
        background-color #fff
        .item
            border .02rem solid rgba(231, 231, 231,.5)
            padding .2rem
            height .2rem
            line-height .2rem
            color black
            font-weight 550
</style>